<template>
  <div class="tools-write-i18n">
    <!-- 1. 新增内容：
          - 选择语言|全部
            - 选择全部后默认 value
          - 输入key，输入value
            校验json中是否已经存在key|value
    -->
    <!-- 2. 替换：
      - 选择语言
      - 通过value，通过key从写
    -->

    <!-- 4. 查询：
        - 通过key或者value
        -模糊查询|精准查询
    -->
    <!-- 4.比较两个json文件中存在的差异key
          - 显示两个差异key:value（a文件存在b文件不存在的key|b文件存在a文件不存在的key）
        -->
    <el-form label-width="100px" class="form-2-layout">
      <el-form-item label="获取文件路径">
        <SelectSaveFilePath v-model="form.filePath" @selectFilePath="selectFilePath" />
      </el-form-item>
      <el-form-item label="操作类型">
        <el-select v-model="form.operate" placeholder="请选择操作类型" clearable filterable>
          <el-option label="新增内容" value="1"></el-option>
          <el-option label="修改/替换" value="2"></el-option>
          <el-option label="删除内容" value="3"></el-option>
          <el-option label="查询内容" value="4"></el-option>
          <el-option label="比较两个json文件" value="5"></el-option>
        </el-select>
      </el-form-item>
      <div class="align-right" style="width: 100%">
        <el-button type="primary" @click="onSubmit()">提交</el-button>
      </div>
      <el-divider />
      <AddLang v-if="form.operate == '1'" :langs="langs" />
      <UpdateLang v-if="form.operate == '2'" :langs="langs" />
      <SearchLang v-if="form.operate == '4'" :langs="langs" />
      <CompareLang v-if="form.operate == '5'" :langs="langs" />
    </el-form>
  </div>
</template>
<script setup lang="ts">
import AddLang from './components/AddLang.vue'
import UpdateLang from './components/UpdateLang.vue'
import SearchLang from './components/SearchLang.vue'
import CompareLang from './components/CompareLang.vue'
const defaultPath = '/Users/chenyupeng/Desktop/YPProject/web-utils/utils/json'
const langs = ref()

const form = reactive({
  filePath: defaultPath || '',
  operate: '1' //选择操作类型
})
onMounted(() => {
  getLangs()
})

const selectFilePath = async (type: string, info: string) => {
  if (type == 'info') {
    form.filePath = info
    // message.value = `已选择路径：${info}`
    // messageType.value = 'info'
    getLangs()
  } else {
    // message.value = `选择路径失败：${info}`
    // messageType.value = 'error'
  }
}
async function getLangs() {
  let res = await window.electronAPI.getAllFiles(form.filePath)
  langs.value = res
    .filter((item) => item.includes('.json'))
    .map((item) => item.replace('.json', ''))
}
const onSubmit = () => {
  console.log(form)
}
</script>

<style lang="scss" scoped>
.tools-write-i18n {
  height: 100%;
  overflow-y: auto;
  &::-webkit-scrollbar {
    display: none;
  }
}
</style>
